<template>
  <el-card>
    <el-button @click="emits('back')" type="info" :icon="Back"></el-button>
    <el-form
      ref="ruleFormRef"
      :model="formData.userInfo"
      status-icon
      label-width="50px"
    >
      <el-form-item label="头像:">
        <el-image
          :src="formData.userInfo!.avatarUrl"
          :preview-src-list="[formData.userInfo!.avatarUrl as string]"
          fit="cover"
        />
        <el-upload
          action="http://lianghj.top:9999/blog/image"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :show-file-list="false"
          :headers="{
            authorization: `Bearer ${userStore.userInfo?.token}`,
            id: userStore.userInfo?.id
          }"
          :data="{ id: formData.userInfo?.id }"
        >
          <el-button size="small">修改头像</el-button>
        </el-upload>
      </el-form-item>

      <el-form-item label="昵称:">
        <el-input v-model="formData.userInfo!.username" autocomplete="off" />
      </el-form-item>

      <el-form-item label="性别:">
        <el-select v-model="formData.userInfo!.gender" placeholder="请选择性别">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="邮箱:">
        <el-input
          v-model="formData.userInfo!.email"
          placeholder="请填写邮箱"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="介绍:">
        <el-input
          v-model="formData.userInfo!.desc"
          placeholder="请填写个人介绍"
          type="textarea"
          autocomplete="off"
          show-word-limit
          maxlength="200"
        />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="eidtSave"> 保存修改</el-button>
  </el-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, UploadProps } from "element-plus";
import { Back } from "@element-plus/icons-vue";
import { useUpdateUserInfo } from "@/hooks/useUserStore";
import local from "@/utils/local";
import user from "@/store/user";

import { editUserInfo } from "@/service/user";
import { IuserInfo, IUserState } from "@/store";

const emits = defineEmits(["back"]);
const props = defineProps<{
  getData: Function;
}>();
const userStore = user();
const router = useRouter();
const ruleFormRef = ref();
const formData = reactive<Partial<IUserState>>({
  userInfo: {}
});
const options = [
  {
    value: "男",
    label: "男"
  },
  {
    value: "女",
    label: "女"
  },
  {
    value: "保密",
    label: "保密"
  }
];
const eidtSave = async () => {
  console.log(ruleFormRef);

  const { desc, username, avatarUrl, email, gender, id } =
    formData.userInfo as IuserInfo;
  const res: any = await editUserInfo({
    desc,
    username,
    avatarUrl,
    email,
    gender,
    id
  });
  if (res.code === 0) {
    useUpdateUserInfo();
    props.getData();
    return ElMessage({
      type: "success",
      message: res.data.msg
    });
  } else {
    return ElMessage({
      type: "warning",
      message: res.data.msg
    });
  }
};
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.data.msg) {
    local.clear();
    router.push("/");
    window.location.replace("/");
    return ElMessage({
      type: "error",
      message: "登录Token失效!请重新登录~"
    });
  }
  formData.userInfo!.avatarUrl = response.data.cover;
};
const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  console.log("上传了文件");
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能超过2M!");
    return false;
  }
  return true;
};
onMounted(() => {
  formData.userInfo = user().userInfo;
});
</script>

<style scoped lang="less">
.el-form {
  margin-top: 20px;
}
.el-form-item__content {
  & > div {
    align-self: flex-end;
  }
}
:deep(.el-image) {
  width: 120px;
  border-radius: 50%;
  object-fit: fill;
  & > img {
    height: 120px !important;
  }
}
</style>
